import React from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import './App.less';
import Layout from './layout/Layout';
import Home from './pages/Home';
const GoodsFilter = React.lazy(() => import('./pages/goods/Filter'));
const GoodsRecommend = React.lazy(() => import('./pages/goods/Recommend'));
const CopyItem = React.lazy(() => import('./pages/copy/Item'));
const CopyLog = React.lazy(() => import('./pages/copy/Log'));
const TradeFenxiao = React.lazy(() => import('./pages/trade/Fenxiao'));
const RefundList = React.lazy(() => import('./pages/refund/List'));
const ShopList = React.lazy(() => import('./pages/shop/List'));
export default function App() {

  return (
    <div className="lapp-container">
      <React.Suspense fallback={<>...</>}>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="goods">
              <Route path="filter" element={<GoodsFilter />} />
              <Route path="recommend" element={<GoodsRecommend />} />
            </Route>
            <Route path="copy">
              <Route path="item" element={<CopyItem />} />
              <Route path="log" element={<CopyLog />} />
            </Route>
            <Route path="trade">
              <Route path="fenxiao" element={<TradeFenxiao />} />
            </Route>
            <Route path="refund">
              <Route path="list" element={<RefundList />} />
            </Route>
            <Route path="shop">
              <Route path="list" element={<ShopList />} />
            </Route>
            <Route path="*" element={<Navigate to="/" replace />} />
          </Route>
        </Routes>
      </React.Suspense>
    </div>
  );
}